import TableTypes from "../../../model/TableTypes.ts";
import {TableData} from "../../../model/TableData.ts";
import {ChangeEvent, useEffect, useState} from "react";
import {baseUrl} from "../../../settings/Settings.ts";
import {Category} from "../../../model/Category.ts";
import useModalState from "../../../settings/GlobalStates.ts";


const Fields = (props: {
    type: TableTypes,
    data?: TableData,
    setFields: (arg: TableData) => void,
    setFile: (arg: any) => void
}) => {


    // eslint-disable-next-line prefer-const
    let {type, data, setFields, setFile} = props
    const [editedData, setEditedData] = useState<TableData | undefined>(data)
    const [categoryList, setCategoryList] = useState([]);
    const [selectedCategoryId, setSelectedCategoryId] = useState('');

    const fetchData = async () => {
        try {
            const response = await fetch(`${baseUrl}/api/library/info`);
            const data = await response.json();
            console.log(data);


            setCategoryList(data.categories);

        } catch (error) {
            console.error('Error fetching data:', error);
        }
    };

    useEffect(() => {
        fetchData()
    }, []);


    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    const state = useModalState((state) => state.isCalledFromFAB)
    const [selectedFile, setSelectedFile] = useState<any>(null);

    useEffect(() => {
        if (state) {
            console.log(state)
            data = {}
            setFile(null)
            setSelectedFile(null)
            console.log(data)
        }
        setEditedData(data)
    }, [data, state]);


    useEffect(() => {
        setFields(editedData || {})
    }, [editedData]);


    useEffect(() => {
        console.log(selectedFile)
    }, [selectedFile]);


    const handleFileChange = (event) => {
        setSelectedFile(event.target.files[0]);

    };


    const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
        event.persist()
        const {name, value} = event.target;
        setEditedData((prevData) => ({
            ...prevData,
            [name]: value
        }));
    };


    switch (type) {

        case TableTypes.BOOKS:
            return (
                <form id="book-form" className={"needs-validation"}>
                    <div className="row g-3">
                        <div className="col-sm-6">
                            <label htmlFor="bookId" className="form-label">Book ID</label>
                            <input type="text" className="form-control" id="bookId"
                                   placeholder="Enter book ID"
                                   value={editedData?.bookId || ''}
                                   name={"bookId"}
                                   onChange={handleChange}
                                   required/>
                            <div className="invalid-feedback">
                                Book ID cannot be empty.
                            </div>
                        </div>

                        <div className="col-sm-6">
                            <label htmlFor="categoryId" className="form-label">
                                Category ID
                            </label>
                            <select
                                className="form-select"
                                id="categoryId"
                                name={"categoryId"}
                                value={selectedCategoryId}
                                onChange={(event) => {
                                    setSelectedCategoryId(event.target.value)
                                    handleChange(event)
                                }}
                            >
                                {categoryList.map((category: Category) => (
                                    <option key={category.categoryId} value={category.categoryId}>
                                        {category.categoryId}
                                    </option>
                                ))}
                            </select>
                            <div className="invalid-feedback">Please provide a valid category.</div>
                        </div>

                        <div className="col-12">
                            <label htmlFor="stackId" className="form-label">Stack ID</label>
                            <input type="text" className="form-control" id="stackId"
                                   placeholder="Enter stack ID"
                                   value={editedData?.stackId || ''}
                                   name={"stackId"}
                                   onChange={handleChange}
                                   required/>
                            <div className="invalid-feedback">
                                Stack ID cannot be empty.
                            </div>
                        </div>

                        <div className="col-12">
                            <label htmlFor="ownerId" className="form-label">Owner ID</label>
                            <input type="text" className="form-control" id="ownerId"
                                   placeholder="Enter owner ID"
                                   value={editedData?.ownerId || ''}
                                   name={"ownerId"}
                                   onChange={handleChange}
                                   required/>
                            <div className="invalid-feedback">
                                Owner ID cannot be empty.
                            </div>
                        </div>

                        <div className="col-12">
                            <label htmlFor="condition" className="form-label">Condition</label>
                            <input type="text" className="form-control" id="condition"
                                   placeholder="Enter condition"
                                   value={editedData?.condition || ''}
                                   name={"condition"}
                                   onChange={handleChange}
                                   required/>
                            <div className="invalid-feedback">
                                Condition cannot be empty.
                            </div>
                        </div>

                        <div className="col-12">
                            <label htmlFor="fee" className="form-label">Fee</label>
                            <input type="number" className="form-control" id="fee"
                                   placeholder="Enter fee"
                                   value={editedData?.fee || ''}
                                   name={"fee"}
                                   onChange={handleChange}
                                   required/>
                            <div className="invalid-feedback">
                                Fee cannot be empty.
                            </div>
                        </div>

                        <div className="col-12">
                            <label htmlFor="price" className="form-label">Price</label>
                            <input type="number" className="form-control" id="price"
                                   placeholder="Enter price"
                                   value={editedData?.price || ''}
                                   name={"price"}
                                   onChange={handleChange}
                                   required/>
                            <div className="invalid-feedback">
                                Price cannot be empty.
                            </div>
                        </div>

                        <div className="col-12">
                            <label htmlFor="status" className="form-label">Status</label>
                            <input type="text" className="form-control" id="status"
                                   placeholder="Enter status"
                                   value={editedData?.status || ''}
                                   name={"status"}
                                   onChange={handleChange}
                                   required/>
                            <div className="invalid-feedback">
                                Status cannot be empty.
                            </div>
                        </div>
                    </div>
                </form>
            )
        case TableTypes.STACKS:


            return (
                <form id="stack-form" className={"needs-validation"}>
                    <div className="row g-3">
                        {/*<div className={"col-6"}>*/}
                        {/*    {selectedFile &&*/}
                        {/*        <img src={URL.createObjectURL(selectedFile)} alt={''}*/}
                        {/*             width={220} height={320}/>*/}
                        {/*        ||*/}
                        {/*        <img src={baseUrl + editedData?.imgUrl} alt={''}*/}
                        {/*             width={220} height={320}/>*/}
                        {/*    }*/}
                        {/*</div>*/}

                        {/*<div className={"col-6 text-center"}>*/}
                        {/*<input type="file"*/}
                        {/*           accept=".jpg, .jpeg, .png, .gif, .bmp"*/}
                        {/*           className={"form-control"} onChange={handleFileChange}/>*/}
                        {/*</div>*/}
                        <div className="col-sm-6">
                            <label htmlFor="firstName" className="form-label">Stack ID</label>
                            <input type="text" className="form-control" id="firstName"
                                   placeholder="200"
                                   value={editedData?.stackId || ''}
                                   name={"stackId"}
                                   onChange={handleChange}
                                   required/>
                            <div className="invalid-feedback">
                                Stack ID cannot contain symbols that are not numbers.
                            </div>
                        </div>

                        <div className="col-sm-6">
                            <label htmlFor="category" className="form-label">
                                Category ID
                            </label>
                            <select
                                className="form-select"
                                id="category"
                                name={"categoryId"}
                                value={selectedCategoryId}
                                onChange={(event) => {
                                    setSelectedCategoryId(event.target.value)
                                    handleChange(event)
                                }}
                            >

                                {categoryList.map((category: Category) => (

                                    <option key={category.categoryId} value={category.categoryId}>
                                        {category.categoryId}
                                    </option>
                                ))}
                            </select>
                            <div className="invalid-feedback">Please provide a valid category.</div>
                        </div>

                        <div className="col-12">
                            <label htmlFor="username" className="form-label">Title</label>
                            <div className="input-group has-validation">
                                <input type="text" className="form-control" id="username"
                                       placeholder="Six of Crows"
                                       value={editedData?.title || ''}
                                       name={"title"}
                                       onChange={handleChange}/>
                                <div className="invalid-feedback">
                                    Username already exists.
                                </div>
                            </div>
                        </div>

                        <div className="col-12">
                            <div className="input-group">
                                <span className="input-group-text">Description</span>
                                <textarea className="form-control" value={editedData?.description || ''}
                                          name={"description"}
                                          onChange={handleChange}
                                          aria-label="With textarea"></textarea>
                            </div>
                        </div>


                        <div className="col-12">
                            <label htmlFor="email" className="form-label">Author</label>
                            <input type="text" className="form-control" id="email"
                                   value={editedData?.author || ''}
                                   name={"author"}
                                   placeholder={"Leigh Bardugo"}
                                   onChange={handleChange}/>
                            <div className="invalid-feedback">
                                Please enter a valid email address for shipping updates.
                            </div>
                        </div>

                    </div>


                </form>
            )
        case TableTypes.MANAGERS:
            return (
                <></>
            )

        case TableTypes.USERS:
            return (
                <form id="registration-form" className="needs-validation">
                    <div className="row g-3">
                        <div className="col-sm-6">
                            <label htmlFor="firstName" className="form-label">First name</label>
                            <input type="text" className="form-control" id="firstName"
                                   placeholder="Jake"
                                   value="" required/>
                            <div className="invalid-feedback">
                                Name cannot contain symbols that are not letters.
                            </div>
                        </div>

                        <div className="col-sm-6">
                            <label htmlFor="lastName" className="form-label">Last name</label>
                            <input type="text" className="form-control" id="lastName" placeholder="Paul"
                                   value="" required/>
                            <div className="invalid-feedback">
                                Last name cannot contain symbols that are not letters.
                            </div>
                        </div>

                        <div className="col-12">
                            <label htmlFor="username" className="form-label">Username</label>
                            <div className="input-group has-validation">
                                <span className="input-group-text">@</span>
                                <input type="text" className="form-control" id="username"
                                       placeholder="jakepaul"/>
                                <div className="invalid-feedback">
                                    Username already exists.
                                </div>
                            </div>
                        </div>

                        <div className="col-12">
                            <label htmlFor="password" className="form-label">Password</label>
                            <div className="input-group has-validation">
                                <input type="password" className="form-control" id="password"
                                       placeholder="********" required/>
                                <div className="invalid-feedback">
                                    Your password is required.
                                </div>
                            </div>
                        </div>


                        <div className="col-12">
                            <label htmlFor="email" className="form-label">Email <span
                                className="text-body-secondary">(Optional)</span></label>
                            <input type="email" className="form-control" id="email"
                                   placeholder="you@example.com"/>
                            <div className="invalid-feedback">
                                Please enter a valid email address for shipping updates.
                            </div>
                        </div>


                        <div className="col-12">
                            <label htmlFor="address" className="form-label">Address</label>
                            <input type="text" className="form-control" id="address"
                                   placeholder="1234 Main St"
                            />
                            <div className="invalid-feedback">
                                Please enter your shipping address.
                            </div>
                        </div>


                    </div>
                </form>
            )

        case TableTypes.ORDERS:
            return (
                <form id="order-form" className={"needs-validation"}>
                    <div className="row g-3">
                        <div className="col-sm-6">
                            <label htmlFor="orderId" className="form-label">Order ID</label>
                            <input type="text" className="form-control" id="orderId"
                                   placeholder="Enter order ID"
                                   value={editedData?.orderId || ''}
                                   name={"orderId"}
                                   onChange={handleChange}
                                   required/>
                            <div className="invalid-feedback">
                                Order ID cannot be empty.
                            </div>
                        </div>


                        <div className="col-12">
                            <label htmlFor="customerId" className="form-label">Customer ID</label>
                            <input type="text" className="form-control" id="customerId"
                                   placeholder="Enter customer ID"
                                   value={editedData?.customerId || ''}
                                   name={"customerId"}
                                   onChange={handleChange}
                                   required/>
                            <div className="invalid-feedback">
                                Customer ID cannot be empty.
                            </div>
                        </div>

                        <div className="col-12">
                            <label htmlFor="orderDate" className="form-label">Order Date</label>
                            <input type="date" className="form-control" id="orderDate"
                                   placeholder="Enter order date"
                                   value={editedData?.orderDate || ''}
                                   name={"orderDate"}
                                   onChange={handleChange}
                                   required/>
                            <div className="invalid-feedback">
                                Order date cannot be empty.
                            </div>
                        </div>

                        <div className="col-12">
                            <label htmlFor="total" className="form-label">Total</label>
                            <input type="number" className="form-control" id="total"
                                   placeholder="Enter total"
                                   value={editedData?.total || ''}
                                   name={"total"}
                                   onChange={handleChange}
                                   required/>
                            <div className="invalid-feedback">
                                Total cannot be empty.
                            </div>
                        </div>

                        <div className="col-12">
                            <label htmlFor="status" className="form-label">Status</label>
                            <input type="text" className="form-control" id="status"
                                   placeholder="Enter status"
                                   value={editedData?.status || ''}
                                   name={"status"}
                                   onChange={handleChange}
                                   required/>
                            <div className="invalid-feedback">
                                Status cannot be empty.
                            </div>
                        </div>
                    </div>
                </form>
            )
    }


}

export default Fields